<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 订单列表</title>
    <link rel="shortcut icon" href="../../content/static/img/favicon.ico">
    <link href="../../content/css/common_modal.css" rel="stylesheet">
    <link href="../../content/static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="../../content/js/lib/vue/select2.min.css" rel="stylesheet">
    <link href="../../content/static/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="../../content/static/css/plugins/chosen/chosen.css" rel="stylesheet">
    <link href="../../content/js/lib/calendar/calendar.css" rel="stylesheet">
    <link href="../../content/js/lib/calendar/scrollbar.css" rel="stylesheet">
    <link href="../../content/static/css/style.min.css?v=4.0.0" rel="stylesheet">
    <link href="../../content/static/js/plugins/bootstrap-fileinput/css/fileinput.css" media="all" rel="stylesheet"/>
    <link href="../../../content/static/css/animate.min.css" rel="stylesheet">

    <style>
        .table {
            margin-bottom: 0px;
            margin-top: 15px;
        }

        table tr {
            height: 40px;
        }

        .bill-tips > li {
            margin-top: 20px;
        }
    </style>
</head>

<body class="content-container">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <ol class="breadcrumb">
                    <li><a>财务管理</a></li>
                    <li><a>财务统计</a></li>
                    <li><a>退款统计</a></li>
                </ol>
            </div>
            <div class="content-wrapper">
                <div class="search-condition">
                    <div>
                        <div class="filter-wrapper">
                            <ul class="clearfix">
                                <li class="filter-item ">
                                    <label>商品分类</label>
                                    <div>
                                        <select v-select2 id="goods">
                                            <option value='0'>全部</option>
                                            <option value='1'>新鲜水果</option>
                                            <option value='2'>海鲜肉类</option>
                                            <option value='3'>零食饮品</option>
                                            <option value='4'>三餐食材</option>
                                            <option value='5'>日用百货</option>
                                            <option value='6'>每日促销</option>
                                            <option value='7'>新鲜蔬菜</option>
                                            <option value='8'>进口红酒</option>
                                        </select>
                                    </div>
                                </li>
                                <li class="filter-item ">
                                    <label>团名称</label>
                                    <div>
                                        <select v-select2 id="groups">
                                            <option value='0'>全部</option>
                                            <option value='1'>团1</option>
                                            <option value='2'>团2</option>
                                            <option value='3'>团3</option>
                                        </select>
                                    </div>
                                </li>
                                <li class="filter-item ">
                                    <label>退款日期</label>
                                    <div>
                                        <div class="fill-wrapper fill-wrapper-auto">
                                            <input id="costTimeStart" type="text"
                                                   class="fill-item timeChoose  revision-time" readonly="readonly">
                                        </div>
                                        <div class="fill-desc">到</div>
                                        <div class="fill-wrapper fill-wrapper-auto">
                                            <input id="costTimeEnd" type="text"
                                                   class="fill-item timeChoose  revision-time" readonly="readonly">
                                        </div>
                                    </div>
                                </li>
                                <li class="filter-item">
                                    <a class="revision-btn revision-btn-search">搜索</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="page-panel helping--panel">
                    <h3 class="page-panel-title">
                        柱状统计
                    </h3>
                    <div class="page-panel-cont">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="ibox float-e-margins">
                                    <div class="ibox-title">
                                        <h5>退款</h5>
                                        <div class="pull-right">
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-xs btn-white active">天</button>
                                                <button type="button" class="btn btn-xs btn-white">月</button>
                                                <button type="button" class="btn btn-xs btn-white">年</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ibox-content">
                                        <div class="row">
                                            <div class="col-sm-9">
                                                <div class="flot-chart">
                                                    <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                                                </div>
                                            </div>
                                            <div class="col-sm-3">
                                                <ul class="stat-list">
                                                    <li>
                                                        <h2 class="no-margins">2,346</h2>
                                                        <small>退款总金额</small>
                                                        <div class="progress progress-mini">
                                                            <div style="width: 48%;" class="progress-bar"></div>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <h2 class="no-margins ">9,180</h2>
                                                        <small>最近一个月总退款</small>
                                                        <div class="progress progress-mini">
                                                            <div style="width: 22%;" class="progress-bar"></div>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="page-panel helping--panel">
                    <h3 class="page-panel-title">
                        列表统计
                    </h3>
                    <div class="page-panel-cont">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="ibox float-e-margins">
                                    <div class="ibox-title">
                                        <h5>退款</h5>
                                    </div>
                                    <div class="ibox-content">
                                        <table class="table table-hover">
                                            <thead>
                                            <tr>
                                                <th>序号</th>
                                                <th>团名称</th>
                                                <th>商品类别</th>
                                                <th>退款金额</th>
                                                <th>退款日期</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td>苏州精品团</td>
                                                <td>海鲜肉类</td>
                                                <td class="text-navy"><i class="fa fa fa-jpy"></i> 1261.98</td>
                                                <td>2019-09-06</td>
                                                <td><a class="text-navy" data-toggle="modal" data-target="#backModal">查看详情</a>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>2</td>
                                                <td>团2</td>
                                                <td>新鲜水果</td>
                                                <td class="text-navy"><i class="fa fa fa-jpy"></i> 999</td>
                                                <td>2019-09-04</td>
                                                <td><a class="text-navy">查看详情</a></td>
                                            </tr>
                                            <tr>
                                                <td>3</td>
                                                <td>团3</td>
                                                <td>新鲜水果</td>
                                                <td class="text-navy"><i class="fa fa fa-jpy"></i> 666</td>
                                                <td>2019-09-03</td>
                                                <td><a class="text-navy">查看详情</a></td>
                                            </tr>
                                            <tr>
                                                <td>4</td>
                                                <td>团4</td>
                                                <td>零食饮品</td>
                                                <td class="text-navy"><i class="fa fa fa-jpy"></i> 777</td>
                                                <td>2019-09-02</td>
                                                <td><a class="text-navy">查看详情</a></td>
                                            </tr>
                                            <tr>
                                                <td>5</td>
                                                <td>团5</td>
                                                <td>日用百货</td>
                                                <td class="text-navy"><i class="fa fa fa-jpy"></i> 888</td>
                                                <td>2019-09-01</td>
                                                <td><a class="text-navy">查看详情</a></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal inmodal" id="backModal" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content animated fadeIn">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"><span
                                            aria-hidden="true">&times;</span><span
                                            class="sr-only">Close</span></button>
                                    <h4 class="modal-title">退款详情</h4>
                                    <small></small>
                                </div>
                                <div class="modal-body">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <address>
                                                <strong>苏州精品团</strong><br>
                                                金鸡湖1号<br>
                                            </address>
                                        </div>
                                        <div class="col-sm-6 text-right">
                                            <h4>退单编号：</h4>
                                            <h4 class="text-navy">A-20190101-01</h4>
                                            <address>
                                                <strong>海鲜肉类</strong><br>
                                                <abbr title="Phone">手机号：</abbr> 186-6666-8888
                                            </address>
                                            <p>
                                                <span><strong>日期：</strong> 2019-08-08</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="table-responsive m-t">
                                        <table class="table invoice-table">
                                            <thead>
                                            <tr>
                                                <th>清单</th>
                                                <th>数量</th>
                                                <th>单价</th>
                                                <th>总价</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>
                                                    <div><strong>冷冻无公害黄花鱼 宁德大黄鱼</strong>
                                                    </div>
                                                </td>
                                                <td>1</td>
                                                <td>&yen;26.00</td>
                                                <td>&yen;31,98</td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div><strong>泰国活冻白虾/女王虾（大号)</strong>
                                                    </div>
                                                    <small>活动特价
                                                    </small>
                                                </td>
                                                <td>2</td>
                                                <td>&yen;80.00</td>
                                                <td>&yen;196.80</td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div><strong>WECOOK味库加拿大进口波士顿大龙虾1只</strong>
                                                    </div>
                                                </td>
                                                <td>3</td>
                                                <td>&yen;420.00</td>
                                                <td>&yen;1033.20</td>
                                            </tr>

                                            </tbody>
                                        </table>
                                    </div>
                                    <table class="table invoice-total">
                                        <tbody>
                                        <tr>
                                            <td><strong>总计</strong>
                                            </td>
                                            <td>&yen;1261.98</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../content/js/lib/vue/vue.min.js"></script>
<script src="../../content/static/js/jquery.min.js?v=2.1.4"></script>
<script src="../../content/static/js/bootstrap.min.js?v=3.3.5"></script>
<script src="../../content/static/js/plugins/chosen/chosen.jquery.js"></script>
<script src="../../content/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../../content/js/lib/calendar/calendar.js"></script>
<script src="../../content/js/lib/calendar/scrollbar.js"></script>
<script src="../../content/static/js/plugins/bootstrap-fileinput/js/fileinput.js"></script>
<script src="../../content/static/js/plugins/bootstrap-fileinput/js/plugins/sortable.js"></script>
<script src="../../content/static/js/plugins/bootstrap-fileinput/js/locales/zh.js"></script>
<script src="../../content/js/lib/vue/vue-modal.js"></script>
<script src="../../content/js/lib/vue/vue-pagination.js"></script>
<script src="../../content/js/common.js"></script>
<script src="../../content/js/lib/vue/select2.js"></script>

<script src="../../content/static/js/plugins/flot/jquery.flot.js"></script>
<script src="../../content/static/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="../../content/static/js/plugins/flot/jquery.flot.spline.js"></script>
<script src="../../content/static/js/plugins/flot/jquery.flot.resize.js"></script>
<script src="../../content/static/js/plugins/flot/jquery.flot.pie.js"></script>
<script src="../../content/static/js/plugins/flot/jquery.flot.symbol.js"></script>
<script src="../../content/static/js/plugins/peity/jquery.peity.min.js"></script>
<script src="../../content/static/js/demo/peity-demo.min.js"></script>
<script src="../../content/static/js/content.min.js?v=1.0.0"></script>
<script src="../../content/static/js/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="../../content/static/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="../../content/static/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="../../content/static/js/plugins/easypiechart/jquery.easypiechart.js"></script>
<script src="../../content/static/js/plugins/sparkline/jquery.sparkline.min.js"></script>
<script src="../../content/static/js/demo/sparkline-demo.min.js"></script>

<script type="text/javascript">
    $(function () {
        $(".chart").easyPieChart({
            barColor: "#f8ac59",
            scaleLength: 5,
            lineWidth: 4,
            size: 80
        });
        $(".chart2").easyPieChart({
            barColor: "#1c84c6",
            scaleLength: 5,
            lineWidth: 4,
            size: 80
        });
        var data2 = [
            [gd(2012, 1, 1), 7],
            [gd(2012, 1, 2), 6],
            [gd(2012, 1, 3), 4],
            [gd(2012, 1, 4), 8],
            [gd(2012, 1, 5), 9],
            [gd(2012, 1, 6), 7],
            [gd(2012, 1, 7), 5],
            [gd(2012, 1, 8), 4],
            [gd(2012, 1, 9), 7],
            [gd(2012, 1, 10), 8],
            [gd(2012, 1, 11), 9],
            [gd(2012, 1, 12), 6],
            [gd(2012, 1, 13), 4],
            [gd(2012, 1, 14), 5],
            [gd(2012, 1, 15), 11],
            [gd(2012, 1, 16), 8],
            [gd(2012, 1, 17), 8],
            [gd(2012, 1, 18), 11],
            [gd(2012, 1, 19), 11],
            [gd(2012, 1, 20), 6],
            [gd(2012, 1, 21), 6],
            [gd(2012, 1, 22), 8],
            [gd(2012, 1, 23), 11],
            [gd(2012, 1, 24), 13],
            [gd(2012, 1, 25), 7],
            [gd(2012, 1, 26), 9],
            [gd(2012, 1, 27), 9],
            [gd(2012, 1, 28), 8],
            [gd(2012, 1, 29), 5],
            [gd(2012, 1, 30), 8],
            [gd(2012, 1, 31), 25]
        ];
        var data3 = [
            [gd(2012, 1, 1), 800],
            [gd(2012, 1, 2), 500],
            [gd(2012, 1, 3), 600],
            [gd(2012, 1, 4), 700],
            [gd(2012, 1, 5), 500],
            [gd(2012, 1, 6), 456],
            [gd(2012, 1, 7), 800],
            [gd(2012, 1, 8), 589],
            [gd(2012, 1, 9), 467],
            [gd(2012, 1, 10), 876],
            [gd(2012, 1, 11), 689],
            [gd(2012, 1, 12), 700],
            [gd(2012, 1, 13), 500],
            [gd(2012, 1, 14), 600],
            [gd(2012, 1, 15), 700],
            [gd(2012, 1, 16), 786],
            [gd(2012, 1, 17), 345],
            [gd(2012, 1, 18), 888],
            [gd(2012, 1, 19), 888],
            [gd(2012, 1, 20), 888],
            [gd(2012, 1, 21), 987],
            [gd(2012, 1, 22), 444],
            [gd(2012, 1, 23), 999],
            [gd(2012, 1, 24), 567],
            [gd(2012, 1, 25), 786],
            [gd(2012, 1, 26), 666],
            [gd(2012, 1, 27), 888],
            [gd(2012, 1, 28), 900],
            [gd(2012, 1, 29), 178],
            [gd(2012, 1, 30), 555],
            [gd(2012, 1, 31), 993]
        ];
        var dataset = [{
            label: "退款金额",
            data: data3,
            color: "#1ab394",
            bars: {
                show: true,
                align: "center",
                barWidth: 24 * 60 * 60 * 600,
                lineWidth: 0
            }
        }];
        var options = {
            xaxis: {
                mode: "time",
                tickSize: [3, "day"],
                tickLength: 0,
                axisLabel: "Date",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: "Arial",
                axisLabelPadding: 10,
                color: "#838383"
            },
            yaxes: [{
                position: "left",
                max: 1070,
                color: "#838383",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: "Arial",
                axisLabelPadding: 3
            }, {
                position: "right",
                clolor: "#838383",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: " Arial",
                axisLabelPadding: 67
            }],
            legend: {
                noColumns: 1,
                labelBoxBorderColor: "#000000",
                position: "nw"
            },
            grid: {
                hoverable: false,
                borderWidth: 0,
                color: "#838383"
            }
        };

        function gd(year, month, day) {
            return new Date(year, month - 1, day).getTime()
        }

        var previousPoint = null,
            previousLabel = null;
        $.plot($("#flot-dashboard-chart"), dataset, options);
        var mapData = {
            "US": 298,
            "SA": 200,
            "DE": 220,
            "FR": 540,
            "CN": 120,
            "AU": 760,
            "BR": 550,
            "IN": 200,
            "GB": 120,
        };
        $("#world-map").vectorMap({
            map: "world_mill_en",
            backgroundColor: "transparent",
            regionStyle: {
                initial: {
                    fill: "#e4e4e4",
                    "fill-opacity": 0.9,
                    stroke: "none",
                    "stroke-width": 0,
                    "stroke-opacity": 0
                }
            },
            series: {
                regions: [{
                    values: mapData,
                    scale: ["#1ab394", "#22d6b1"],
                    normalizeFunction: "polynomial"
                }]
            },
        })
        $('#file-es').fileinput({
            language: 'zh',
            uploadUrl: '#',
            allowedFileExtensions: ['jpg', 'png', 'gif']
        });
        //时间验证
        var calObj = new $.Calendar({
            //time: true,
            skin: 'white'
        });

        $('#costTimeStart').focus(function () {
            var $this = $(this),
                val = $this.val(),
                endTime = $('#costTimeEnd').val();
            calObj.pick({
                elem: this,
                endDate: endTime
            });
        });
        $('#costTimeEnd').focus(function () {
            var $this = $(this),
                val = $this.val(),
                startTime = $('#costTimeStart').val();
            calObj.pick({
                elem: this,
                startDate: startTime
            });
        });
    });

    $("#goods").select2({
        width: "220px"
    });
    $("#groups").select2({
        width: "220px"
    });


    var vmData = {
        approvalModal: {
            show: false,
            style: {
                width: '560px',
                height: "auto"
            },
            addClass: 'scroll-modal',
            func: {
                type: Function
            },
            close: function () {
                vm.approvalModal.show = false;
            }
        },
        detailModal: {
            show: false,
            style: {
                width: '60%',
                height: "auto"
            },
            addClass: 'scroll-modal',
            func: {
                type: Function
            },
            close: function () {
                vm.detailModal.show = false;
            }
        },
        pruchModal: {
            show: false,
            style: {
                width: '980px',
                height: "auto"
            },
            addClass: 'scroll-modal',
            func: {
                type: Function
            },
            close: function () {
                vm.pruchModal.show = false;
            }
        },
        addModal: {
            show: false,
            style: {
                width: '680px',
                height: "auto"
            },
            addClass: 'scroll-modal',
            func: {
                type: Function
            },
            close: function () {
                vm.addModal.show = false;
            }
        },
        modelTitle: "",
        approveStatusList: [{
            "Text": "全部",
            "Value": "553",
        },
            {
                "Text": "待项目经理审批",
                "Value": "553",
            },
            {
                "Text": "待CEO审批",
                "Value": "553",
            },
            {
                "Text": "待A仓Leader审批",
                "Value": "553",
            },
            {
                "Text": "待B仓Leader审批",
                "Value": "553",
            },
            {
                "Text": "待销售经理审批",
                "Value": "553",
            },
        ],
        backStatusList: [{
            "Text": "全部",
            "Value": "553",
        },
            {
                "Text": "未归还",
                "Value": "360",
            }, {
                "Text": "已归还",
                "Value": "365",
            },
            {
                "Text": "转销售",
                "Value": "4105",
            }
        ],
        warehouseList: [{
            "Text": "北京",
            "Value": "553",
        },
            {
                "Text": "上海",
                "Value": "360",
            }, {
                "Text": "大西洋大西洋大西洋大西洋大西洋大西洋大西洋",
                "Value": "365",
            },
            {
                "Text": "广州",
                "Value": "4105",
            }, {
                "Text": "北冰洋",
                "Value": "510",
            },
            {
                "Text": "深圳",
                "Value": "3219",
            },
            {
                "Text": "天津",
                "Value": "99402",
            },
            {
                "Text": "合肥",
                "Value": "519",
            },
            {
                "Text": "苏州",
                "Value": "518",
            },
            {
                "Text": "南京",
                "Value": "517",
            },
            {
                "Text": "无锡",
                "Value": "525",
            },
            {
                "Text": "大东北",
                "Value": "528",
            },
            {
                "Text": "大西北",
                "Value": "533",
            },
            {
                "Text": "非洲",
                "Value": "538",
            },
            {
                "Text": "欧洲",
                "Value": "537",
            },
            {
                "Text": "南美洲",
                "Value": "536",
            }
        ],
        modelFlag: 0,
        selectProductItem: [],
        accountList: [{
            "Text": "中国银行",
            "Value": "1",
        }, {
            "Text": "建设银行",
            "Value": "2",
        }, {
            "Text": "农业银行",
            "Value": "3",
        }, {
            "Text": "工商银行",
            "Value": "4",
        }, {
            "Text": "现金",
            "Value": "5",
        },],
    };
    vmData = $.extend(vmData, baseData);
    var vmMothod = {
        init: function () {
        },
        approvalShow: function () {
            vm.approvalModal.show = true;
        },
        detailShow: function () {
            vm.detailModal.show = true;
        },
        pruchShow: function (obj) {
            vm.pruchModal.show = true;
            $("#backStatus").select2({
                width: "160px"
            });
            $("#backStatus").val('').trigger('change'); //初始化
        },
        addShow: function () {
            vm.addModal.show = true;
            $("#incomeType").select2({
                width: "187px"
            });
            $("#incomeType").val('').trigger('change'); //初始化
            $("#accountType").select2({
                width: "187px"
            });
            $("#accountType").val('').trigger('change'); //初始化
            $("#account").select2({
                width: "187px"
            });
            $("#account").val('').trigger('change'); //初始化
        },
        productChooseClick: function (e) {
            if (e.checked) {
                vm.productChooseList.forEach(function (a, v) {
                    if (a.Id = v.Id)
                        vm.productChooseList.splice(v, 1);
                });
            } else {
                vm.productChooseList.push(e);
            }
        },
    };
    vmMothod = $.extend(vmMothod, baseCommonFunction);
    var vm = new Vue({
        el: '.content-container',
        data: vmData,
        methods: vmMothod
    });
    vm.init();
</script>
</body>

</html>
